<template>
  <footer class="footer">
    <div class="container">
      <div class="container-left">
        <img class="logo" src="@/assets/img/logo/logo_white.png" />

        <ul class="legal-links">
          <li class="legal-links-item"><a href="https://openanolis.cn/page/privacy-policy">隐私协议</a></li>
          <li class="legal-links-item"><a href="https://openanolis.cn/page/about">关于我们</a></li>
          <li class="legal-links-item"><a href="https://openanolis.cn/page/contact">联系我们</a></li>
          <li class="legal-links-item"><a href="https://openanolis.cn/page/%E6%B3%95%E5%BE%8B%E5%A3%B0%E6%98%8E">法律声明</a></li>
          <li class="legal-links-item"><a href="https://openanolis.cn/page/coc">社区行为准则</a></li>
          <li class="legal-links-item"><a href="https://openanolis.cn/pact/contributor">贡献者协议</a></li>
        </ul>
      </div>

      <div class="container-right">
        <div class="qr_code-item">
          <img class="qr_code" src="@/assets/img/qr_code01.jpeg" />
          <p>公众号</p>
        </div>
        <div class="qr_code-item">
          <img class="qr_code" src="@/assets/img/qr_code02.jpeg" />
          <p>钉钉交流群</p>
        </div>
        <div class="qr_code-item">
          <img class="qr_code" src="@/assets/img/qr_code03.png" />
          <p>用户反馈问卷</p>
        </div>
      </div>
    </div>

    <div class="copyright">
      <a href="http://idinfo.zjamr.zj.gov.cn//bscx.do?method=lzxx&id=3301103301840000648381" target="_blank">
        <img src="https://img.alicdn.com/imgextra/i4/O1CN01NWJABb1MoLIsuNI2F_!!6000000001481-1-tps-65-70.gif">
      </a>
      <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011002013770" target="_blank">
        <img style="margin-right:5px" src="https://img.alicdn.com/imgextra/i2/O1CN01TRgVGF1O0zrLOD9uo_!!6000000001644-2-tps-20-20.png">
        浙公网安备 33011002016143号
      </a>
      <a href="https://beian.miit.gov.cn/" target="_blank">浙ICP备2021005855号-2</a>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
.footer {
  width: 100%;
  background: #323f50;

  .container {
    margin: 0 auto;
    padding: 41px 60px 0;
    width: 1180px;
    display: flex;
    justify-content: space-between;
  }

  .container-left {
    width: calc(100% - 460px);
  }

  .logo {
    display: block;
    width: 154px;
  }

  .legal-links {
    margin: 35px 0 18px;
    display: flex;
    flex-wrap: wrap;
  }

  .legal-links-item {
    margin: 0 40px 17px 0;
    list-style: none;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 2px;
    text-align: justify;
    a {
      display: block;
      color: #ffffffdb;
    }
  }

  .container-right {
    display: flex;
  }

  .qr_code-item {

    & + .qr_code-item {
      margin-left: 20px;
    }

    .qr_code {
      display: block;
      height: 130px;
    }
    p {
      margin-top: 5px;
      text-align: center;
      text-align: center;
      font-size: 14px;
      color: #b9b9b9;
    }
  }

  .copyright {
    margin: 10px auto 0;
    padding: 12px 0 15px;
    width: 1060px;
    height: 56px;
    border-top: 1px solid #ffffff30;
    display: flex;
    align-items: center;
    a {
      margin-right: 10px;
      display: flex;
      align-items: center;
      font-size: 12px;
      letter-spacing: 2px;
      color: #ffffff99;
    }
    img {
      display: block;
      height: 20px;
    }
  }
}
</style>
